<template>
	<div id="trainingResources-course">
		<div class="training-course-wrap">
			<div class="t-r-filter clearfix">
				<p
					class="c-filter-name fl"
					v-for="v in labelData"
					:key="v.id"
					:class="[{ active: v.id == listQuery.labelValue }]"
					@click="activeClick('labelValue', v.id)"
				>
					{{ v.name }}
				</p>
			</div>
		</div>
		<div>
			<CourseList v-if="tableData.length" :tableData="tableData" />
			<Pagination
				v-show="parseInt(pageObj.count) > 0"
				:total="parseInt(pageObj.count)"
				@change="getList"
				:page.sync="listQuery.page"
				:limit.sync="listQuery.limit"
			/>
			<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
		</div>
	</div>
</template>

<script>
import { openApiSysLabelQuery, openApiSysCourseQuery } from '@/api/openApi';

import CourseList from '@/components/home/courseList.vue';
export default {
	components: {
		CourseList,
		OrnamentImg: () => import('../../components/OrnamentImg.vue')
	},
	data() {
		return {
			labelData: [],
			listQuery: {
				page: 1,
				limit: 8,
				courseType: this.$route.meta.type,
				status: 1,
				auditStatus: 2,
				labelValue: '', //  	课程标签
				sortOrder: ''
			},
			pageObj: {},
			loading: false,
			tableData: []
		};
	},
	mounted() {
		this.getLabelQuery();
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			openApiSysCourseQuery(this.listQuery).then((res) => {
				setTimeout(() => {
					this.tableData = res.data.data;
					this.ranking1 = res.data.data;
					this.pageObj = res.data;
					this.loading = false;
					this.allTotle = Number(this.allTotle) + Number(this.pageObj.count);
				}, 200);
			});
		},

		getLabelQuery() {
			openApiSysLabelQuery({ type: '6' }).then((res2) => {
				this.labelData = res2.data.data;
				this.labelData.unshift({
					id: '',
					name: '全部'
				});
			});
		},
		//筛选选中 获取id
		activeClick(name, id, type) {
			this.listQuery[name] = id;
			this.getList();
		}
	}
};
</script>

<style lang="scss">
#trainingResources-course {
	position: relative;
	padding: 30px 0;
	min-height: 550px;
	.el-card__body {
		padding: 0px;
	}
	.course-heblcok {
		margin-bottom: 40px;

		.c-left {
			font-size: 30px;
			font-weight: 900;
			color: #000;
			img {
				vertical-align: -6px;
				padding-right: 10px;
			}
		}
		.c-right {
			border-left: 1px solid #666666;
			padding-left: 10px;
			color: #000;
			cursor: pointer;
			margin-top: 10px;
			font-size: 16px;
		}
	}
	.training-course-wrap {
		.t-r-filter {
			margin-bottom: 20px;
			.el-col.el-col-3 {
				margin-bottom: 20px;
			}
			.c-filter-name {
				padding: 8px 15px;
				border: 1px solid #d7d0cb;
				background: #fff0e7;
				border-radius: 8px;
				font-size: 14px;
				text-align: center;
				color: #000;
				cursor: pointer;
				margin-right: 10px;
				margin-bottom: 10px;
				transition: all 0.3s;
			}
			.c-filter-name:hover {
				background-color: #ef6309;
				color: #fff;
			}
			.active {
				background-color: #ef6309;
				color: #fff;
			}
		}
	}
	.t-r-list--wrap-item {
		height: 270px;
		cursor: pointer;
		.l-img {
			width: 100%;
			height: 180px;
			position: relative;
			img {
				width: 100%;
				height: 100%;
				display: inherit;
			}
			.comment-num {
				position: absolute;
				right: 0;
				bottom: 0;
				padding: 10px 25px;
				background: #282b30;
				color: #fff;
				i {
					font-size: 16px;
					padding-right: 5px;
				}
			}
		}
		.r-txt {
			background: #fff;
			width: 282px;
			padding: 20px;
			font-size: 15px;
			.title {
				padding-bottom: 20px;

				font-size: 20px;
			}
			.col {
				color: #8c8c8c;
			}
			.txt-info {
				.txt-row {
					width: 100%;
					margin-bottom: 15px;
					.row-name {
					}
					.row-cont {
						width: 90%;
					}
					.four-ellipsis {
						height: 100px;
						line-height: 24px;
					}
				}
			}
			.txt-score {
				p {
					.start {
						margin: 0 20px;
					}
					.marksco {
						margin-left: 50px;
					}
				}
				.txt-ico {
					color: #8c8c8c;
					font-size: 15px;
					i {
						padding-right: 5px;
						font-weight: 900;
					}
					img {
						margin-right: 5px;
					}
					span {
						margin-right: 15px;
					}
					.i-size i {
						font-size: 16px;
					}
				}
				i.el-icon-date {
					font-weight: 900;
					margin-right: 5px;
				}
			}
		}
	}
	.t-r-list-btn {
		text-align: center;
		margin: 45px 0;

		.el-button--primary {
			color: #fff;
			background-color: #ed5907;
			border-color: #ed5907;
			padding: 20px 80px;
			border-radius: 50px;
			font-size: 16px;
		}
	}
	.t-r-list-img {
		width: 100%;
		height: 180px;
		padding-bottom: 40px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
